<template lang="pug">
.ui.long.small.modal(
  :class="class"
)
  .header(v-if="header")
    slot(name="header")
      | {{header}}
  .content(
    :class="{image: image}"
  )
    slot(name="content")
      | {{content}}
  .actions
    slot(name="actions")
      .ui.button.positive 确定
      .ui.button.negative 取消
</template>

<script>
export default {
  name: 'modal',
  props: ['image', 'approve', 'deny', 'show', 'header', 'content', 'class'],
  data () {
    return {
      modal: null,
    }
  },
  ready () {
    this.modal = $(this.$el).modal({
      onDeny: () => {
        this.show = false
        if (_.isFunction(this.deny)) {
          this.deny()
        }
      },
      onApprove: () => {
        this.show = false
        if (_.isFunction(this.approve)) {
          this.approve()
        }
      },
    })
  },
  watch: {
    show: {
      handler (val, old) {
        if (val) {
          this.modal.modal('show')
        } else {
          this.modal.modal('hide')
        }
      },
      deep: true,
      // immediate: true,
    },
  },
}
</script>

<style lang="sass">
</style>
